<template>
  <div class="fillcontain">
    <div class="table_container">
        <div class="tab_search clearfix">
            <div class="fl">
                <div class="search_inp el-input">
                    <input type="text" autocomplete="off" placeholder="请输入关键字查询" class="el-input__inner">
                </div> 
                <button type="button" class="el-button el-button--primary">
                    <i class="search"></i>
                    <span>搜索</span>
                </button>
            </div> 
            <div class="fr">
                <el-button type="primary" icon="el-icon-plus" @click="addAlarmRule()" size="small">添加告警规则</el-button>
            </div>
        </div>
            <el-table
                :data="tableData"
                size="small"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="告警规则ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="告警规则名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="mode"
                    label="告警类型">
                </el-table-column>
                <el-table-column
                    prop="level"
                    label="告警级别">
                </el-table-column>
                <el-table-column
                    prop="notice"
                    label="告警通知方式">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="告警规则状态">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" type="text"  @click="addAlarmRule()">修改</el-button>
                        <el-button size="small" type="text" @click="enableAndDisable()">失效</el-button>
                        <el-button size="small" type="text" @click="delRule">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <div class="Pagination">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="20"
                layout="total, prev, pager, next"
                :total="count">
                </el-pagination>
            </div>

    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, //当前页
      count: 10, //总记录数
      tableData: [
        {
          id: "1",
          name: "过压告警",
          mode: "过压",
          level: "1",
          notice: "强制录音，短信通知",
          status: "生效"
        }
      ]
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleCommand(command) {
        console.log(command)
    },
    addAlarmRule() {
        this.$router.push({
            path: '/electricBoxManage/alarmManage/alarmRule'
        })
    },
    // 生效或失效 
    enableAndDisable() {
        this.$confirm('确定要停用或启用该规则吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }).catch(() => {});
    },
    // 删除规则 
    delRule() {
        this.$confirm('确定要删除规则吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {});
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/table.less";
</style>

